<template>
  <div>
    <tips></tips>
    <div class="cart" v-for="item in cartList" :key="item.id">
      <van-checkbox-group v-model="result">
        <van-checkbox name="item.goods_id"></van-checkbox>
      </van-checkbox-group>
      <van-card
        :num="item.number"
        :price="item.retail_price.toFixed(2)"
        :title="item.goods_name"
        :thumb="item.list_pic_url"
      >
      </van-card>
      <van-stepper v-model="item.number" integer />
    </div>
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
      <p>{{ cartTotal.checkedGoodsCount }}</p>
      <!-- <template #tip>
        累计共<span style="color: blue; font-size: 18px">{{
          cartTotal.checkedGoodsCount
        }}</span
        >件商品，可点击<van-button type="primary" size="mini">编辑</van-button>
        按钮进行商品数量修改
      </template> -->
    </van-submit-bar>
  </div>
</template>
 
<script>
import { getCartData } from "@/request/api";
import Tips from "@/components/common/Tips.vue";
export default {
  name: "",
  components: {
    Tips,
  },
  data() {
    return {
      //如果每个数组项的checked为1，则把product_id push到result中
      result: [],
      checked: false,
      //商品列表数组
      cartList: [],
      //购物车数据
      cartTotal: {},
    };
  },
  methods: {
    //获取购物车数据
    getShopCart() {
      getCartData().then((res) => {
        console.log(res.data);
        if (res.errno == 0) {
          this.cartList = res.data.cartList;
          this.cartTotal = res.data.cartTotal;
          this.cartList.map((val) => {
            if (val.checked == 1) {
              this.result.push(val.product_id);
            }
          });
        }
      });
    },

    //全选操作
    checkAll() {},
    onSubmit() {},
  },
  created() {
    this.getShopCart();
  },
};
</script>
 
<style lang="less" scoped>
// .shop-cart {
//   height: calc(100% - 130px);
// }
.cart {
  background: #fff;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.1rem 0.16rem;
  border-bottom: 1px solid #ccc;
  .van-card {
    flex: 1;
    .van-card__bottom {
      margin-bottom: 0.3rem;
      .van-card__price {
        font-size: 0.16rem;
      }
    }
  }
  .van-stepper {
    position: absolute;
    right: 0.15rem;
    bottom: 0;
    padding-bottom: 0.08rem;
  }
}
.van-submit-bar {
  bottom: 50px;
}
</style>